<template>
	<view>
		<view class="head-address1">
			<image src="../../../static/my/address_icon.png" mode=""></image>
			<view class="address-box">
				<text class="adres-txt-2">{{ orderList.province + orderList.city + orderList.area}}</text>
				<view class="adres-txt-3">{{ orderList.address }}</view>
				<text class="adres-txt-4">{{ orderList.accept_name }}</text>
				<text class="adres-txt-5">{{ orderList.mobile }}</text>
			</view>
		</view>
		<view class="cart-list">
			<view class="cart-list-box">
				<view class="list-box-head">
					<image src="../../../static/cart/store.png" mode=""></image>
					<text>国集采供应链</text>
					<u-icon name="arrow-right" size="12" style="margin: 4rpx 0 0 4rpx;"></u-icon>
				</view>
				<view class="list-box-cont" v-for="(item,index) in detailList" :key="index" @click="toProductDetail(item.goods_id)">
					<view class="listbox-cont-left">
						<image :src="baseUrl + item.img"></image>
					</view>
					<view class="listbox-cont-right">
						<view class="cont-right-top">
							<view class="cont-tit">{{ item.name }}</view>
							<view class="cont-spec">{{ item.sc }}</view>
						</view>
						<view class="cont-right-bot">
							<view class="cont-price-box">
								<text class="price-icon">￥</text>
								<text class="price-tit">{{ item.goods_price }}</text>
							</view>
							<view style="color: #999;font-size: 26rpx;margin-top: 10rpx;">x {{ item.goods_nums }}</view>
						</view>
					</view>
				</view>
				<view class="all-price">
					<text>{{ orderList.order_amount}}</text>
					<text>￥</text>
					<text>订单总金额：</text>
				</view>
			</view>
		</view>
		<view class="order-info">
			<text style="font-weight: bold;">订单信息</text>
			<view class="info-box">
				<view class="info-tit">
					<text>订单编号：</text>
					<text>{{ orderList.order_no }}</text>
				</view>
				<view class="info-tit">
					<text>下单时间：</text>
					<text>{{ orderList.create_time }}</text>
				</view>
				<view class="info-tit">
					<text>付款时间：</text>
					<text >{{ orderList.pay_time }}</text>
				</view>
				<view class="info-tit">
					<text>发货时间：</text>
					<text>{{ orderList.send_time }}</text>
				</view>
				<view class="info-tit">
					<text>完成时间：</text>
					<text>{{ orderList.completion_time }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				orderId: '',
				orderList: {},
				detailList: [],
				baseUrl: 'https://gjc.hy-dzsc.cn/',
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
			this.userId = e.userId
			this.getOrderDetail()
		},
		methods: {
			// 获取订单详情
			getOrderDetail(status){
				this.$getHttp(`/gjcApi/getOderDetail?id=${this.orderId}`, {}, res => {
					this.orderList = res.orderList
					res.goodsList.forEach(v => {
						this.detailList.push(v)
					})
					
				})
				console.log(this.orderList)
			},
			// 跳转商品详情
			toProductDetail(id){
				uni.navigateTo({
					url: `/pages/class/product-detail?proId=${id}&userId=${this.userId}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.head-address1{
	display: flex;
	align-items: center;
	padding: 20rpx 20rpx 20rpx 0;
	background: $uni-model-color;
	image{
		width: 60rpx;
		height: 60rpx;
		flex-shrink: 0;
		padding: 0 30rpx;
	}
	.address-box{
		.adres-txt-2{
			font-size: 28rpx;
			letter-spacing: 2rpx;
		}
		.adres-txt-3{
			margin: 14rpx 0;
			font-size: 32rpx;
			font-weight: bold;
		}
		.adres-txt-4,.adres-txt-5{
			font-size: 28rpx;
			margin-right: 20rpx;
		}
	}
}
.cart-list{
	padding: 0 15rpx;
	.cart-list-box{
		margin: 25rpx 0;
		padding: 25rpx 20rpx;
		border-radius: 20rpx;
		background: $uni-model-color;
		.list-box-head{
			display: flex;
			align-items: center;
			image{
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
			text{
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 1rpx;
			}
		}
		.list-box-cont{
			display: flex;
			margin-top: 30rpx;
			.listbox-cont-left{
				display: flex;
				align-items: center;
				image{
					// flex-shrink: 1;
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
					border: 2rpx solid $uni-text-color;
				}
			}
			.listbox-cont-right{
				width: 482rpx;
				display: flex;
				margin-left: 20rpx;
				flex-direction: column;
				justify-content: space-between;
				.cont-right-top{
					.cont-tit{
						overflow:hidden;
						font-size: 28rpx;
						font-weight: bold;
						letter-spacing: 1rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.cont-spec{
						font-size: 22rpx;
						border-radius: 8rpx;
						margin: 14rpx 0 35rpx 0;
						color: $uni-text-color-grey;
						// background-color:rgba(0, 0, 0, .1);
					}
				}
				.cont-right-bot{
					display: flex;
					color: $uni-text-color;
					justify-content: space-between;
					.cont-price-box{
						.price-icon{
							font-size: 24rpx;
						}
						.price-tit{
							font-size: 34rpx;
							font-weight: bold;
						}
					}
				}
			}
		}
		.all-price{
			display: flex;
			margin-top: 20rpx;
			align-items: center;
			flex-direction: row-reverse;
			text:nth-child(1){
				font-size: 38rpx;
				margin-bottom: 8rpx;
				color: $uni-text-color;
			}
			text:nth-child(2){
				font-size: 26rpx;
				color: $uni-text-color;
			}
			text:nth-child(3){
				font-size: 26rpx;
				margin-bottom: 2rpx;
			}
		}
	}
}
.order-info{
	padding: 20rpx;
	background: $uni-model-color;
	.info-box{
		padding-left: 8rpx;
		.info-tit{
			font-size: 28rpx;
			padding-top: 25rpx;
			color: $uni-text-color-placeholder;
		}
	}
}
</style>
